<template>
  <el-steps :active="stepData?.stepNum" align-center>
    <el-step
      v-for="item in stepData?.stepList"
      :key="item.title"
      :title="item.title"
      :description="item.description"
    />
  </el-steps>
</template>

<script setup lang="ts">
import { PropType, ref, watch } from 'vue';
import { formatDate } from '@/utils/util';

interface StepList {
  title: string;
  description: string;
}

// 组装描述
const getTimeText = (timestamp: string, prefixText: string, failText: string) =>
  timestamp ? `${prefixText}：${formatDate(timestamp)}` : failText;

//  获取步骤条列表
const useGetStepData = () => {
  let stepList: StepList[] = [];
  let stepNum: number = 0;

  // 已取消
  if (props.detailData.state === '9') {
    stepList = [
      {
        title: '已申请',
        description: getTimeText(
          props.detailData.createTime,
          '申请时间',
          '未申请'
        )
      },
      {
        title: '已拒绝',
        description: getTimeText(
          props.detailData.updateTime,
          '拒绝时间',
          '未拒绝'
        )
      }
    ];
    stepNum = stepList.length;
  }

  // 正常订单流程
  else {
    // 状态-提现：1-审核中，2-审核通过，3-已到账，4-提现失败，9-已拒绝
    stepList = [
      {
        title: '已申请',
        description: getTimeText(
          props.detailData.createTime,
          '申请时间',
          '未申请'
        )
      },
      {
        title: '已审核',
        description: getTimeText(
          props.detailData.updateTime,
          '审核时间',
          '待审核'
        )
      },

      (() => {
        return props.detailData.state === '4'
          ? {
              title: '提现失败',
              description: getTimeText(
                props.detailData.errorTime,
                '失败时间',
                '提现失败'
              )
            }
          : {
              title: '已到账',
              description: getTimeText(
                props.detailData.finishTime,
                '到账时间',
                '待到账'
              )
            };
      })()
    ];
    stepNum = +props.detailData.state;
  }

  return {
    stepList: stepList.filter((item) => !!item),
    stepNum
  };
};

let stepData = ref<{ stepList: StepList[]; stepNum: number }>();

// props
const props = defineProps({
  detailData: {
    type: Object as PropType<API.userCapital.EntitySchema>,
    default: () => ({})
  }
});

watch(
  () => props.detailData,
  (val) => {
    if (!val) return;
    stepData.value = useGetStepData();
  },
  {
    immediate: true
  }
);
</script>

<style lang="scss" scoped></style>
